/**
 * 波段需求
 */
import * as React from 'react'
import { Card, Button, Form, Row, Col, Select, Divider, Input, Cascader, message } from 'antd'
import Authentication from '../../router/Authentication'
import { PageHeaderLayout, StandardTable } from '../../components'
import '../../assets/style/TableList.less'
const FormItem = Form.Item
const Option = Select.Option

export interface State {
  formValues: string
}

@Authentication
class Thdemand extends React.Component<any, State> {
  
  state = {
    formValues: ''
  }
  componentDidMount () {
    //获取波段列表
    this.search({}, {})
  }

  handleFormReset = () => {
    const { form } = this.props
    form.resetFields()
    this.setState({
      formValues: ''
    })
    //获取波段列表
    this.search({}, {})
  }
  /**
   * 点击查询按钮
   */
  handleSearch = (e: any) => {
    e.preventDefault()
    const { form, data: { pagination } } = this.props
    form.validateFields((err: any, fieldsValue: any) => {
      if (err) return
      this.setState({
        formValues: fieldsValue
      })
      this.search({
        ...fieldsValue,
        pageIndex: pagination.current,
        pageSize: pagination.pageSize,
      }, pagination)
    })
  }
  /**
   * 调用查询方法
   */
  search (param: any, page: any) {
    const { list } = this.props
    list(param, page)
  }
  renderSimpleForm() {
    const { form, categorys } = this.props
    const { getFieldDecorator } = form
    getFieldDecorator('dlid', { initialValue: [] })
    getFieldDecorator('xlid', { initialValue: [] })
    const changeCateGorys = (e: string []) => {
      let dlid = e[0]
      let xlid = ''
      if (e.length>1) xlid = e[1]
      form.setFieldsValue({
        dlid,
        xlid
      })
    }
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={6} sm={24}>
            <FormItem label="年份">
              {getFieldDecorator('year')(
                <Select placeholder="请选择" style={{ width: '100%' }}>
                  <Option value="">全部</Option>
                  <Option value="2018">2018</Option>
                  <Option value="2019">2019</Option>
                  <Option value="2020">2020</Option>
                  <Option value="2021">2021</Option>
                  <Option value="2022">2022</Option>
                  <Option value="2023">2023</Option>
                  <Option value="2024">2024</Option>
                  <Option value="2025">2025</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={7} sm={24}>
            <FormItem label="波段">
              {getFieldDecorator('band')(
                <Input placeholder="请输入波段"/>
              )}
            </FormItem>
          </Col>
          <Col md={7} sm={24}>
            <FormItem label="分类">
              <Cascader options={categorys} onChange = {changeCateGorys} changeOnSelect placeholder="请选择分类"/>
            </FormItem>
          </Col>
          <Col md={4} sm={24}>
            <span className="submitButtons">
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    )
  }
  /**
   * 筛选或者更改分页
   */
  handleStandardTableChange = (pagination: any, filtersArg: any, sorter: any) => {
    const { formValues } = this.state
    let params: any = formValues
    params = {
      ...params,
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
    }
    this.search(params, pagination)
  }
  //查看详情
  handleInfo = (no: string, id: string) => {
    const { record } = this.props
    record({ id, no })
    this.props.history.push({ pathname: '/thdemand/info' })
  }
  /**
   * 样衣图片上传
   */
  handleUpload = (no: string, id: string, uploaddate: string) => {
    if(new Date(uploaddate).getTime()>new Date().getTime()) {
      const { record } = this.props
      record({ id, no })
      this.props.history.push({ pathname: '/thdemand/upload' })
    }else {
      message.error('传图日期已截止！')
    }
  }
  render () {
    const { loading, data } = this.props
    const columns: any [] = [
      {
        title: '年份',
        dataIndex: 'Year',
      },
      {
        title: '波段',
        dataIndex: 'bandname',
      },
      ,{
        title: '风格',
        dataIndex: 'fgText',
        key: 'fgText',
      },
      {
        title: '大类',
        dataIndex: 'dlText'
      },
      {
        title: '小小类',
        dataIndex: 'xlText'
      },
      {
        title: '上货款数',
        dataIndex: 'supplyqty'
      },
      {
        title: '提供样版数',
        dataIndex: 'kindqty'
      },
      {
        title: '上传图片截止日期',
        dataIndex: 'uploaddate'
      },
      {
        title: '审核人',
        dataIndex: 'checker'
      },
      {
        title: '审核日期',
        dataIndex: 'checkdate',
        // sorter: true
      },
      {
        title: '状态',
        dataIndex: 'statusText'
      },
      {
        title: '操作',
        render: (row: any) => (
          <React.Fragment>
            <a onClick={ () => this.handleInfo(row.id, row.bandid)}>查看</a>
            <Divider type="vertical" />
            <a onClick={ () => this.handleUpload(row.id, row.bandid, row.uploaddate)}>样衣上传</a>
          </React.Fragment>
        ),
      },
    ]
    return (
      <PageHeaderLayout
        title="">
        <Card bordered={false}>
          <div className="tableList">
            <div className="tableListForm">{this.renderSimpleForm()}</div>
            <StandardTable
              rowKey = "id"
              select = {false}
              loading={loading}
              data={data}
              columns={columns}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    )
  }
}

export default Form.create()(Thdemand)